<template>
  <div>
    <div id="allmap"></div>
  </div>

</template>

<script>
import {MP} from '../map'
export default {
  mounted () {
      var headerHeight = document.getElementsByClassName("listContain")[0].clientHeight;
      var footerHeight = document.getElementById("footer").clientHeight;
      var contentHeight = document.getElementById("allmap").clientHeight;
      var fixedHeight = headerHeight + footerHeight;
      var avalibalHeight = window.innerHeight;
      if(fixedHeight + contentHeight < avalibalHeight) {
        document.getElementById("allmap").style.height = avalibalHeight - fixedHeight + "px"
      }

      this.$nextTick(function () {
        MP("8cjWFpzoZqbUGIsvjzvM6OkPERDzrY8S").then( BMap => {
        	var sContent =`<div class="map">
              <p class="company">深圳北影云步科技有限公司</p>
              <p class="tel"><i></i><span>0755-23023305</span></p>
              <p class="mobile"><i></i><span>+86 189 2646 8756   +86 130 0253 5325</span></p>
              <p class="addr"><i></i><span>深圳市宝安区西乡街道宝田一路臣田工业区定军山电影文化产业园1期6楼</span></p>
              <p class="QRCode"></p>
              <p class="msg_QRCode">扫码了解更多信息</p>
          </div>
        	`;

            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(113.8815999354,22.5998256210); // 创建点坐标
            var marker = new BMap.Marker(point);  // 创建标注
      			map.addOverlay(marker);              // 将标注添加到地图中
      			marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.centerAndZoom(point,18);
            map.enableScrollWheelZoom();

      			var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象 
      			marker.openInfoWindow(infoWindow);
      			marker.addEventListener("click", function(){          
      				this.openInfoWindow(infoWindow); //开启信息窗口
      			});
          })
      })
  }
}
</script>

<style>
  #allmap{
    width: 100%;
    margin:0;
    font-family:"微软雅黑";
  }
  .company {
    font-size: 18px;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
  }
  .map>p {
    margin: 10px 0;
  }
  .tel>span, .mobile>span, .addr>span {
    margin-left: 10px;
  }
  .tel>i, .mobile>i, .addr>i {
    width: 16px;
    height: 23px;
    margin-left: 10px;
    display: block;
    float: left;
    background:url("../assets/tel.png") no-repeat 0 0;
  }
  .mobile>i {
    background:url("../assets/mobile.png") no-repeat 0 0;
  }
  .addr>i {
    background:url("../assets/addr.png") no-repeat 0 0;
  }
  .QRCode {
    width: 160px;
    height: 160px;
    background:url("../assets/QRCode.png") no-repeat 0 0;
    margin-left: 10px !important;
  }
  .msg_QRCode {
    width: 160px;
    font-size: 14px;
    text-align: center;
    margin: 10px !important;
  }
</style>